<template>
   <div>
       <ul>
           <li v-for="(hero,index) in heros" :key="index" :class="{'A':'red','B':'yellow','C':'green','D':'blue'}[hero.score]">
               {{hero.name}},{{hero.score}}
           </li>
       </ul>

       英雄姓名： <input type="text" name="" v-model="name" /><br />
       英雄成绩 <input type="text" name="" v-model="score" /><br />
       <button @click="addHero">添加英雄</button>
   </div>
</template>

<script>
   export default {
       data () {
       return {
        name: '',score:'',
        heros: [{
            id: 1,
            name: '奥利安娜',
            score:'A'
        },{
            id: 2,
            name: '妲己',
            score:'B'
        },{
            id: 3,
            name: '后裔',
            score:'C'
        },{
            id: 4,
            name: '鲁班',
            score:'D'
        }]
       }
   },
   methods: {
       addHero(){
           this.heros.push({
               name: this.name,
               score: this.score
           });
           this.name = ' ';
           this.score = ' '
       }
   }
 }
</script>

<style>
 .red{
     font-size: 20px;
     background-color: red;
 }
 .yellow{
     background-color: yellow;
 }
 .green{
     background-color: green;
 }
 .blue{
     background-color: blue;
 }
</style>
